<template>
  <a-descriptions bordered v-if="CommonDefine.useful(props.model)">
    <a-descriptions-item :label="$t('346')" v-if="props.model.updateTs">{{
      props.model.updateTs
    }}</a-descriptions-item>
    <a-descriptions-item
      :label="$t('354')"
      v-if="props.model.lastRecordEditor"
      >{{ props.model.lastRecordEditor }}</a-descriptions-item
    >
    <a-descriptions-item
      :label="$t('355')"
      v-if="props.model.lastRecordEditTs"
      >{{ props.model.lastRecordEditTs }}</a-descriptions-item
    >
  </a-descriptions>
  <p></p>
  <a-form :model="formModel" layout="vertical" autocomplete="off">
    <a-form-item
      :label="$t('356')"
      :rules="[{ required: true, message: $t('357') }]"
    >
      <a-input v-model:value="formModel.name" />
    </a-form-item>
    <a-form-item :label="$t('358')">
      <a-switch v-model:checked="formModel.allowVisit" />
    </a-form-item>
    <a-form-item :label="$t('360')">
      <a-input v-model:value="formModel.memo" />
    </a-form-item>
    <div v-if="formModel.store">
      <a-form-item
        :label="$t('306')"
        :rules="[{ required: true, message: $t('357') }]"
      >
        <a-input v-model:value="formModel.store.host" />
      </a-form-item>
      <a-form-item
        :label="$t('307')"
        :rules="[{ required: true, message: $t('357') }]"
      >
        <a-input-number
          v-model:value="formModel.store.port"
          :min="1"
          :max="65535"
        />
      </a-form-item>
      <a-form-item
        :label="$t('237')"
        :rules="[{ required: true, message: $t('357') }]"
      >
        <a-input v-model:value="formModel.store.user" />
      </a-form-item>
      <a-form-item
        :label="$t('204')"
        :rules="[{ required: true, message: $t('357') }]"
      >
        <a-input-password v-model:value="formModel.store.password" />
      </a-form-item>
      <a-form-item
        :label="$t('309')"
        :rules="[{ required: true, message: $t('357') }]"
      >
        <a-input v-model:value="formModel.store.tbName" />
      </a-form-item>
      <a-form-item label="主键列名称">
        <a-input v-model:value="formModel.store.pkCol" />
      </a-form-item>
      <a-form-item :label="$t('310')">
        <a-input v-model:value="formModel.store.utsCol" />
      </a-form-item>
      <a-form-item label="逻辑有效判断依据">
        <a-input v-model:value="formModel.store.luSql" />
      </a-form-item>
    </div>
    <a-space>
      <a-button danger :disabled="!canDelete" @click="removeModel">{{
        $t("226")
      }}</a-button>
      <a-button type="primary" @click="doSaveModel">{{ $t("224") }}</a-button>
    </a-space>
  </a-form>
</template>
<script setup>
import CommonDefine from "@/component/CommonDefine";
import { computed, reactive, watch } from "vue";
import JSEncrypt from "jsencrypt";
import { useI18n } from "vue-i18n";

const props = defineProps({
  model: { type: Object, default: () => {} },
});

const { t } = useI18n();

const appStore = CommonDefine.appStore();

const formModel = reactive({});

const canDelete = computed(() => {
  return props.model.id && props.model.id > 0;
});

const encryptor = new JSEncrypt();
encryptor.setPublicKey(appStore.pubKey);

const doSaveModel = () => {
  let model = props.model;
  if (model.id && model.id > 0) {
    if (formModel.store) {
      formModel.store.password = encryptor.encrypt(formModel.store.password);
    }
    CommonDefine.apiPostArm("/api/v1/model/save", formModel, (d) => {
      CommonDefine.alert(t("361"));
    });
  } else {
    CommonDefine.apiPostArm("/api/v1/model/create", formModel, (d) => {
      CommonDefine.alert(t("362"));
    });
  }
};

const removeModel = () => {
  let pd = { modelId: props.model.id };
  CommonDefine.apiPostArm("/api/v1/model/remove", pd, (d) => {
    CommonDefine.alert(t("363"));
  });
};

watch(
  () => props.model,
  (newValue) => {
    CommonDefine.clearProperty(formModel);
    Object.assign(formModel, newValue);
    if (CommonDefine.useful(newValue.store)) {
      formModel.store = {};
      Object.assign(formModel.store, newValue.store);
    }
  },
  {
    immediate: true,
  }
);
</script>
